import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from './vars.css';

export const knnoInput = style({
	border: `1px solid ${vars.color.border}`,
	color: vars.color.text,
	borderRadius: vars.layout.smallRadius,
	// transition: 'border-color .2s',
	fontSize: '1rem',
	padding: '0 0.4em',
	overflow: 'hidden',
	lineHeight: vars.layout.inputHeight,
	backgroundColor: vars.color.panelBackground,
	outline: 'none',
	boxSizing: 'border-box',
	minWidth: 0,
	width: '20em',
	selectors: {
		'&:hover': {
			borderColor: vars.color.secondaryText,
		},
		'&:focus': {
			borderColor: vars.color.accent,
			boxShadow: `0 0 2px ${vars.color.accent}`,
		},
		'&.verify:invalid': {
			color: vars.color.danger,
			borderColor: vars.color.danger,
			boxShadow: `0 0 1px ${vars.color.danger}`,
		},
		'&.verify:valid': {
			borderColor: vars.color.success,
			boxShadow: `0 0 1px ${vars.color.success}`,
		},
	},
});

globalStyle(`${knnoInput}::-webkit-input-placeholder,${knnoInput}>input::placeholder`, {
	color: vars.color.placeholderText,
});

globalStyle(`${knnoInput}:disabled`, {
	cursor: 'default',
	color: vars.color.disabledText,
	borderColor: vars.color.disabledText,
});
